<template>
  <div class="reservation-container">
    <el-row :gutter="20">
      <!-- 会议室筛选条件 -->
      <el-col :span="24">
        <el-card class="filter-card">
          <el-form :inline="true" :model="filters">
            <el-form-item label="会议室类型">
              <el-select v-model="filters.type" placeholder="请选择会议室类型">
                <el-option label="普通会议室" value="普通"></el-option>
                <el-option label="视频会议室" value="视频"></el-option>
                <el-option label="培训室" value="培训"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="容纳人数">
              <el-input-number v-model="filters.capacity" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="设备要求">
              <el-checkbox-group v-model="filters.equipment">
                <el-checkbox label="投影仪"></el-checkbox>
                <el-checkbox label="白板"></el-checkbox>
                <el-checkbox label="视频会议系统"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchRooms">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 会议室列表 -->
      <el-col :span="24">
        <el-card class="rooms-card">
          <el-row :gutter="20">
            <el-col :span="8" v-for="room in rooms" :key="room.id">
              <el-card :body-style="{ padding: '10px' }">
                <div class="room-info">
                  <h3>{{ room.name }}</h3>
                  <p>类型: {{ room.type }}</p>
                  <p>容纳人数: {{ room.capacity }}人</p>
                  <p>设备: {{ room.equipment.join(', ') }}</p>
                  <p>状态: <el-tag :type="room.status === '空闲' ? 'success' : 'danger'">{{ room.status }}</el-tag></p>
                </div>
                <el-button v-if="room.status === '空闲'" type="primary" @click="showReservationDialog(room)">预约</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 预约对话框 -->
    <el-dialog v-model="reservationDialogVisible" title="预约会议室" width="50%">
      <el-form :model="reservationForm" label-width="120px">
        <el-form-item label="会议室">
          <el-input v-model="reservationForm.roomName" disabled></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
            v-model="reservationForm.date"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="预计结束时间">
          <el-date-picker
            v-model="reservationForm.endDate"
            type="datetime"
            placeholder="选择结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="预约人">
          <el-input v-model="reservationForm.reserver" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="reservationForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="预约事由">
          <el-input v-model="reservationForm.reason" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reservationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReservation">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const filters = ref({
  type: '',
  capacity: 1,
  equipment: []
})

const rooms = ref([
  {
    id: 1,
    name: '会议室A',
    type: '普通',
    capacity: 10,
    equipment: ['投影仪', '白板'],
    status: '空闲'
  },
  {
    id: 2,
    name: '会议室B',
    type: '视频',
    capacity: 20,
    equipment: ['投影仪', '视频会议系统'],
    status: '使用中'
  },
  {
    id: 3,
    name: '会议室C',
    type: '培训',
    capacity: 30,
    equipment: ['白板', '视频会议系统'],
    status: '空闲'
  }
])

const reservationDialogVisible = ref(false)
const selectedRoom = ref(null)

const reservationForm = ref({
  roomName: '',
  date: '',
  endDate: '',
  reserver: '张三',
  phone: '',
  reason: ''
})

const searchRooms = () => {
  // 这里可以添加搜索逻辑
  ElMessage.success('搜索功能暂未实现')
}

const showReservationDialog = (room) => {
  selectedRoom.value = room
  reservationForm.value.roomName = room.name
  reservationDialogVisible.value = true
}

const submitReservation = () => {
  // 这里可以添加提交预约的逻辑
  ElMessage.success('预约成功！')
  reservationDialogVisible.value = false
}
</script>

<style scoped>
.reservation-container {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.rooms-card {
  height: 100%;
}

.room-info {
  margin-bottom: 15px;
}

.room-info h3 {
  margin: 0 0 10px 0;
}

.room-info p {
  margin: 5px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
